<template>
    <div class="chat">
        <div class="chat-history">
            <div v-for="(msg, index) in messages" :key="index" class="message-row"
                :style="{ textAlign: msg.type === 'robot' ? 'left' : 'right' }">

                <div :class="{ 'left-msg': msg.type === 'robot', 'right-msg': msg.type === 'user' }"> {{ msg.text }}</div>
            </div>
        </div>
        <div class="input-wrapper">
            <a-textarea class="textarea" v-model:value="newMessage" placeholder="请输入问题" auto-size />
            <a-button type="primary" @click="sendMessage">发送</a-button>
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import { ErrorCodes, ref } from 'vue'
import axios from 'axios';


type MessageType = 'user' | 'robot'

interface Message {
    type: MessageType
    text: string
}

const messages = ref<Message[]>([{
    type: 'robot',
    text: '你好，我是智能小鹿，我可以回答关于路的任何问题。请向我提问吧。',
}])
const newMessage = ref('')

const scrollToBottom = () => {
    setTimeout(() => {
        const chatHistory = document.querySelector(".chat-history");
        chatHistory.scrollTop = chatHistory.scrollHeight;
    }, 0);
};

const submitToServer = async () => {
    const payload = {
        model: 'vicuna-13b-v1.1',
        messages: [
            {
                role: 'user',
                content: newMessage.value,
            },
        ],
    }

    try {
        // const response = await fetch('http://220.194.128.226:39010/v1/chat/completions', {
        //     method: 'POST',
        //     headers: {
        //         'Content-Type': 'application/json',
        //         'Access-Control-Allow-Origin': '*', // 允许跨域请求
        //         'Access-Control-Allow-Methods': 'POST', // 限制请求方法为 POST
        //     },
        //     mode: 'cors', // 允许跨域请求
        //     body: JSON.stringify(payload),
        // })
        // const result = await response.json()

        axios.defaults.withCredentials = false;
        axios.defaults.xsrfCookieName = false;

        const res = await axios.post('http://220.194.128.226:39010/v1/chat/completions', payload, {
            headers: {
                'Content-Type': 'application/json' // 设置请求头为 JSON 格式
            }
        });


        const result = res.data
        console.log(result)

        const robotMessage: Message = {
            type: 'robot',
            text: result.choices[0].message.content,
        }
        messages.value.push(robotMessage)
        scrollToBottom();

    } catch (error) {
        console.error(error)

        const robotMessage: Message = {
            type: 'robot',
            text: error,
        }
        messages.value.push(robotMessage)
        scrollToBottom();
    }
}
const sendMessage = () => {
    const userMessage: Message = {
        type: 'user',
        text: newMessage.value,
    }
    messages.value.push(userMessage)
    scrollToBottom();
    submitToServer();

    // newMessage.value = ''
    // setTimeout(() => {
    //     const robotMessage: Message = {
    //         type: 'robot',
    //         text: '我是小鹿机器人，你好啊',
    //     }
    //     messages.value.push(robotMessage)


    // }, 500)


}

const handlePressCreator = () => {

}
</script>
  
<style scoped lang="scss">
.chat {
    display: flex;
    flex-direction: column;
    // background-color: green;
    height: 80vh;
    color: #333333;

    .chat-history {
        flex: 1;
        // background-color: yellow;
        overflow-y: scroll;

        .message-row {
            padding: 5px;

            .left-msg {
                display: inline-block;
                margin-top: 10px;
                background-color: #e1f7d5;
                border-radius: 12px;
                padding: 5px;
                margin-right: 50px;
            }

            .right-msg {
                display: inline-block;
                margin-top: 10px;
                background-color: #f0f0f0;
                text-align: left;
                border-radius: 12px;
                padding: 5px;
                margin-left: 50px;

            }
        }
    }


    .input-wrapper {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        // background-color: pink;
        justify-content: center;
        align-items: center;

        .textarea {
            margin-right: 10px;
        }

    }

}
</style>
  